// 1.找到图片
let image = $("#image");
// 2.剪裁配置项
let option = {
  // 设置剪裁的比例
  aspectRatio: 1 / 1,
  // 指定预览区
  preview: ".img-preview",
};
// 3.调用cropper方法,实现初始的效果
image.cropper(option);

// ---------------------点击 上传,触发文件域的单击事件--------------------
$('button:contains("上传")').on("click", function () {
  $("#file").trigger("click");
});

// ----------------------选择了图片,更换剪裁区的图片----------------------
$("#file").on("change", function () {
  // 获取图片的url地址
  if (this.isDefaultNamespace.length > 0) {
    // 1.找到文件对象
    console.dir(this);
    let fileObj = this.files[0];
    // 2.创建url
    let url = URL.createObjectURL(fileObj);
    // 更换剪裁区的图片
    // 方法一
    // image.cropper('destroy').attr('src', url).cropper(option);
    // 方法二
    image.cropper("replace", url);
  }
});

// ----------------------完成更换-----------------------------
// 点击, 确定, 按钮 --> 剪裁图片 --> 转换成base64格式 --> 提交给接口
$('button:contains("确定")').on("click", function () {
  // 剪裁图片
  let canvas = image.cropper("getCroppedCanvas", { width: 30, height: 30 });
  //canvas有一套内置的API方法,属于JS原生语法(只有指定ipeg格式,才能指定图片质量这个参数)
  let base64 = canvas.toDataURL("image/jpeg", 0.5);
  // console.log(base64);

  axios
    .post("/my/user/avatar", `avatar=${encodeURIComponent(base64)}`)
    .then((res) => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 更换了头像,更新父页面(index.html)的头像
        window.parent.getUserInfo();
      }
    });
});
